<template>
  <div class="article">
    <!-- top -->
    <van-nav-bar title="文章详情" left-arrow @click-left="$router.go(-1)">
      <template #right>
        <van-icon name="wap-nav" v-if="articleData.courseList" />
      </template>
    </van-nav-bar>
    <div class="body" v-if="!loading">
      <div class="article-header">
        <h1>{{ articleData.subject }}</h1>
        <p class="post-info">
          发表于{{ articleData.publishDate?.substring(0, 10) }} · 阅读{{
            articleData.viewCount
          }}
        </p>
        <div class="author-info">
          <div class="left">
            <img :src="`https://file.ituring.com.cn/SmallCover/${cover}`" />
            <span class="author-name">{{
              articleData.userBlock?.nickName
            }}</span>
          </div>
          <div class="right">
            <span class="btn-msg" @click="corres">短信息</span>
            <span class="btn-follow" @click="follow">{{
              articleData.userBlock?.followed ? "-取消关注" : "+关注"
            }}</span>
          </div>
        </div>
      </div>
      <van-dialog v-model="show" show-cancel-button @confirm="send">
        <p class="send">{{ `发消息给${articleData.userBlock?.nickName} : ` }}</p>
        <textarea v-model="msg" id="" cols="35" rows="5" placeholder="填写消息内容"></textarea>
      </van-dialog>
      <!-- 内容 -->
      <div class="video" v-if="articleData.videoPlayInfo">
        <!-- 课程时改动 -->
        <video
          webkit-playsinline=""
          playsinline=""
          x-webkit-airplay=""
          x5-playsinline=""
          preload="preload"
          src="https://outin-ca9c0b28503a11e9b2ea00163e1c35d5.oss-cn-shanghai.aliyuncs.com/sv/522151f4-16c9346d273/522151f4-16c9346d273.mp4?Expires=1676529202&amp;OSSAccessKeyId=LTAI8bKSZ6dKjf44&amp;Signature=UoB2gKAL0ru5%2BJjh34bO36sXZgg%3D"
          style="width: 100%; height: 100%"
          controls
        ></video>
      </div>
      <div class="article-typo" v-html="articleData.htmlOfBody"></div>
      <!-- 底部 -->
      <div class="article-footer">
        <p class="declare">
          ©本文仅用于学习和交流目的，不代表图灵社区观点。非商业转载请注明作译者、出处，并保留本文的原始链接。
        </p>
        <div class="tags">
          <span class="tag" v-for="t in articleData.tags" :key="t.id">{{
            t.name
          }}</span>
        </div>
        <div class="interact">
          <div class="btn" @click="reward">
            <van-icon name="gift-o" /><span>赞赏</span>
          </div>
          <div class="btn" @click="postFav">
            <van-icon name="fire-o" /><span
              >{{ articleData.userFav ? "已推荐" : "推荐"
              }}{{ articleData.favCount }}</span
            >
          </div>
          <div class="btn" @click="postVote">
            <van-icon name="star-o" /><span
              >{{ articleData.userVote ? "已收藏" : "收藏"
              }}{{ articleData.voteCount }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="loading" v-if="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import {
  ArticleAPI,
  FollowUserAPI,
  ArticleFavAPI,
  ArticleVoteAPI,
  CorrespondAPI,
} from "@/apis";
export default {
  props: ["id"],
  data() {
    return {
      loading: true,
      // 
      articleData: {},
      show: false,
      msg: '',
    };
  },
  mounted() {
    this.loading = true
    this.getArticle();
  },
  computed: {
    // 图片
    cover() {
      if (this.articleData.imageKey == null) {
        return "";
      } else {
        return this.articleData.imageKey;
      }
    },
    // 是否关注
    isFollow() {
      if (this.articleData.userBlock.followed) {
        return "UnFollow";
      } else {
        return "Follow";
      }
    },
    // 是否推荐
    isFav() {
      if (this.articleData.userFav) {
        return "UnFav";
      } else {
        return "Fav";
      }
    },
    // 是否收藏
    isVote() {
      if (this.articleData.userVote) {
        return "UnVote";
      } else {
        return "Vote";
      }
    },
  },
  methods: {
    // 从课程过来需要带头
    async getArticle() {
      let { data } = await this.$http(ArticleAPI(this.id), {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
      this.articleData = data;
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 关注
    async follow() {
      // 发送请求
      await this.$http.post(
        FollowUserAPI(this.isFollow, this.articleData.userBlock.id),
        {},
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );
      // 刷新数据
      this.getArticle();
    },
    // 信息弹窗
    corres() {
      this.show = true
    },
    // 发送
    async send(){
      await this.$http.post(CorrespondAPI(this.msg, this.articleData.userBlock?.id ),
      {},
      {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
    },
    // reward
    reward() {
      Dialog({ message: "求求了,别点了,我一毛钱都没有了(>-<)" });
    },
    // 推荐
    async postVote() {
      await this.$http.post(
        ArticleVoteAPI(this.isVote, this.id),
        {},
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );
      // 刷新数据
      this.getArticle();
    },
    // 收藏
    async postFav() {
      await this.$http.post(
        ArticleFavAPI(this.isFav, this.id),
        {},
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );
      // 刷新数据
      this.getArticle();
    },
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style lang="scss" scoped>
.article {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 999;
  // top
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    width: 100vw;
  }

  .body {
    padding: 50px 15px;
    background-color: #fff;
    .article-header {

      h1 {
        width: 300px;
        color: var(--book-name-font-black);
        font-size: 20px;
        line-height: 28px;
      }
      .post-info {
        color: var(--more-font-grey);
        font-size: 14px;
        line-height: 20px;
        margin-top: 15px;
      }

      .author-info {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        .left {
          img {
            width: 24px;
            height: 24px;
            border-radius: 24px;
          }
          .author-name {
            color: var(--book-name-font-black);
            font-size: 14px;
            line-height: 20px;
            margin-left: 10px;
          }
        }
        .right {
          .btn-msg {
            display: inline-block;
            color: var(--more-font-grey);
            font-size: 14px;
            padding: 0 9px;
            line-height: 24px;
            border: 1px solid var(--more-font-grey);
            border-radius: 3px;
          }
          .btn-follow {
            display: inline-block;
            color: #fff;
            background-color: var(--theme-blue);
            font-size: 14px;
            line-height: 24px;
            padding: 1px 9px;
            margin-left: 15px;
            border-radius: 3px;
          }
        }
      }
    }
    p.send{
      margin: 20px 0 0 20px;
      font-size: 14px;
      line-height: 19px;
      color: var(--book-name-font-black);
    }
    textarea{
      margin: 20px 0 0 20px;
      font-size: 14px;
      line-height: 19px;
      border: none;
      outline: none;
    }
    .video {
      margin: 10px 0;
      video {
        width: 345px;
        height: 250px;
      }
    }
    .article-footer {
      .declare {
        color: var(--more-font-grey);
        font-size: 14px;
        line-height: 19px;
      }
      .tags {
        display: flex;
        flex-wrap: wrap;
        max-width: 182px;
        .tag {
          color: var(--theme-blue);
          background-color: var(--blue-tag-bg-blue);
          font-size: 12px;
          line-height: 20px;
          padding: 2px 10px;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          margin: 5px 5px 0 0;
        }
      }
      .interact {
        color: var(--more-bg-white);
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        .btn {
          margin: 12px 0;
          color: var(--book-name-font-black);
          font-size: 14px;
          line-height: 17px;
          span {
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>